﻿<template>
    <div class="flex justify-end items-center h-full">
        <ul class="h-full hidden md:flex space-x-5 mr-5 text-base overflow-hidden">
            <li
                class="f-full flex justify-center items-center px-2 lg:px-5 hover:bg-slate-700 cursor-pointer"
                v-for="(item, index) in list"
                :key="index"
                @click.stop.prevent="go(item.path)"
                :class="active === item.path ? 'text-red-500 text-lg' : ''"
            >
                {{ item.name }}
            </li>
            <div class="items-center hidden lg:flex">
                <button type="button" class="white-btn" @click="login">
                    {{ t('Login') }}
                </button>
            </div>
        </ul>

        <div class="md:hidden cursor-pointer pr-5" @click="showPopup = true">
            <img src="../assets/imgs/zhe.png" alt="" class="w-10" />
        </div>

        <el-drawer v-model="showPopup" size="80%" direction="ltr" :show-close="false" :with-header="false">
            <div class="flex flex-col justify-between w-full h-full">
                <ul class="text-black w-full text-base">
                    <li
                        v-for="(item, index) in list"
                        :key="index"
                        class="cursor-pointer hover:bg-slate-400 hover:text-white p-5"
                        :style="{
                            color: active === item.path ? 'red' : '',
                        }"
                        @click="go(item.path)"
                    >
                        {{ item.name }}
                    </li>
                </ul>
                <div class="h-[90px] px-5 flex" @change="changeLanguage">
                    <Language type="white" @colsed="colsed"/>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script setup lang="ts">
import Language from '@/components/language/index.vue';
import config from '@/config';
import { computed, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter, useRoute } from 'vue-router';
const { t, locale } = useI18n();

const router = useRouter();
const route = useRoute();
const list = computed(() => {
    return [
        {
            name: t('Home'),
            path: '/',
        },
        {
            name: t('Solutions'),
            path: '/solution',
        },
        {
            name: t('ContactUs'),
            path: '/contact',
        },
        {
            name: t('Download'),
            path: '/download',
        },
    ];
});


const active = ref('/');

const showPopup = ref(false);

const go = (name: string) => {
    router.push(name);
    showPopup.value = false;
};

const changeLanguage = () => {
    showPopup.value = false;
};

const colsed = () => {
     showPopup.value = false;
}


const login = () => {
    // 跳转不同环境的页面
    window.open(config.JUMP_URL + `?es=${locale.value}`, '__blank');
};
watch(
    () => route.path,
    val => {
        active.value = val;
    },
    {
        immediate: true,
    }
);
</script>

<style scoped lang="scss"></style>
